<template>
	<view class="content">
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
		<backtop ref="backtops"></backtop>
		<view class="header_tuo_box" :style="{'padding-top': title_top+35 + 'px'}">
			<view class="header_tuo" :style="{'padding-top': title_top+5 + 'px'}">托行健-物流托盘包装平台</view>
		</view>
		<view class="header" style="background-color: #f4f9ff;">
			<view class="center flexbetween">
				<view class="center_left flexleft">
					<image src="/static/images/sy_slices/bluebiao.png" mode="" class="biao"></image>
					<view class="zheng">{{city_text}}</view>
				</view>
				<view class="center_right flexright" v-if="isShowCount">
					<view>今日访客：{{dataAll.today_views}}</view>
					<view class="heng"></view>
					<view>累计访客：{{dataAll.total_views}}</view>
				</view>
			</view>
			<!-- 搜索框 -->
			<view class="ss flexleft">
				<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
				<input type="text" placeholder="请输入搜索内容" class="inp" disabled="" @click="sear">
			</view>
			<!--  -->
			<view class="margin_top">
				<u-swiper :list="lbt.top" height="150" keyName="image_text" @click="jumprul1(lbt.top,index)"
					circular></u-swiper>
			</view>
			<!-- 专线查询 -->
			<view class="nav">
				<view class="oo">
					<view class="nav_a flexbetween" @click="zhuanxian">
						<view class="nav_zhuan">专线查询（找专线）</view>
						<view class="nav_cha">查看更多
							<image src="@/static/images/sy_slices/right.png" mode="" class="cha_img"></image>
						</view>
					</view>
				</view>
				<view class="oo">
					<view class="nav_a flexbetween">
						<uni-data-picker @change="bindPickerChange" :localdata="items">
							<view class="nav_zhuan" style="width: 250rpx;">
								<!-- <view class="nav_cha flexright" style="width: 250rpx;" @click="selectcity(0)"> -->
								{{startaddress}}
								<!-- {{startcitydata.county || "始发地"}} -->
							</view>
						</uni-data-picker>

						<image src="@/static/images/sy_slices/fangxiang.png" mode="" class="jiantou"
							@click="changeaddress"></image>
						<uni-data-picker @change="bindPickerChange2" :localdata="items">
							<view class="nav_cha flexright" style="width: 250rpx;">
								<!-- <view class="nav_cha flexright" style="width: 250rpx;" @click="selectcity(1)"> -->
								{{emdaddress}}
								<!-- {{endcitydata.county || "目的地"}} -->
							</view>
						</uni-data-picker>

					</view>
				</view>
				<view class="liji" @click="zhuanxian">立即查询</view>
			</view>
		</view>
		<view style="background-color: #f4f9ff;" class="mainpadding_top">
			<view class="zhaobiao flexbetween">
				<view class="zhaobiao_a" @click="sign">
					<image src="@/static/images/sy_slices/zhaobiao.png" mode="" class="zhaobiao_img"></image>
					<view class="zi">招标</view>
				</view>
				<view class="zhaobiao_a" @click="zhaopin">
					<image src="@/static/images/sy_slices/engage.png" mode="" class="zhaobiao_img"></image>
					<view class="zi">招聘</view>
				</view>
				<view class="zhaobiao_a" @click="business">
					<image src="@/static/images/sy_slices/qi.png" mode="" class="zhaobiao_img"></image>
					<view class="zi">找企业</view>
				</view>
				<view class="zhaobiao_a" @click="forum">
					<image src="@/static/images/sy_slices/orange.png" mode="" class="zhaobiao_img"></image>
					<view class="zi">论坛</view>
				</view>
				<view class="zhaobiao_a" @click="message">
					<image src="@/static/images/sy_slices/book.png" mode="" class="zhaobiao_img"></image>
					<view class="zi">资讯</view>
				</view>
			</view>
		</view>
		<view class="header">
			<!-- 供需（找设备） -->
			<view class="gongxu flexbetween" @click="jumpsupply">
				<view class="gongxu_a">
					<image src="@/static/images/sy_slices/supply.png" mode="" class="gongxu_img"></image>
					托盘包装供求
				</view>
				<view class="gongxu_b">查看更多
					<image src="@/static/images/sy_slices/right.png" mode="" class="cha_img"></image>
				</view>
			</view>
			<view class="section" v-for="item in gxlist" :key="item.id" @click="jumpdetail(item.id)">
				<view class=" flexleft">
					<view class="left">
						<image :src="item.images_text[0]" mode="" class="section_img"></image>
					</view>
					<view class="right">
						<view class="flexbetween">
							<view class="right_ershou">{{item.title}}</view>
							<!-- <view class="right_gongying" v-if="item.type==1">供应</view> -->
							<view class="right_xuqui" v-if="item.type==1" style="background-color: #258ffe;">供应</view>
							<view class="right_xuqui" v-if="item.type==2">需求</view>
						</view>
						<view class="section_center flexbetween">
							<view class="num">数量：<text class="ge">{{item.num}}个</text></view>
							<view class="price">价格：<text class="qian"><text
										v-if="item.price_des!='面议'">￥</text>{{item.price_des}}</text></view>
						</view>
						<view class="flexleft flex_wrap">
							<view class="gongying" v-for="ite in item.gx_item_text" :key="ite">{{ite}}</view>
						</view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="huitext">{{item.user.nickname}}</view>
					<view class="huitext">{{item.createtime_text}}</view>
				</view>
			</view>

			<!--  -->
			<!-- <view class="margin_top">
					<u-swiper :list="lbt.center" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
						bgColor="#fafafa"></u-swiper>
				</view> -->
			<view class="flexbetween">
				<image :src="item.image_text" mode="" class="zhuanye_img" v-for="(item,index) in lbt.center"
					:key="item.id" @click="jumprul(item)">
				</image>
			</view>
			<!-- 优选仓库 -->
			<!-- <view class="youxuan flexbetween">
				<view class="youxuan_a">
					<image src="@/static/images/sy_slices/hourse.png" mode="" class="youxuan_img"></image>
					优选仓库
				</view>
				<view class="youxuan_b" @click="storage">查看更多
					<image src="@/static/images/sy_slices/right.png" mode="" class="cha_img"></image>
				</view>
			</view>
			<view class="flexcenter" v-if="list.data.length==0">
				<view class="cangchuimage">
					<image
						src="https://logist.kongzhongwangluo.top/uploads/20230526/f377054f8e46a30276f03bbe1f440d27.png"
						mode=""></image>
				</view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="chuzu flexleft" v-for="item in list.data" :key="item.id" @click="cangchuxq(item.id)">
					<view class="ccimg_relative">
						<image :src="item.image_text" mode="" class="chuzu_img"></image>
						<view class="right_chuzu">{{item.item.name}}</view>
					</view>
					<view class="chuzu_a">
						<view class="flexbetween">
							<view class="word_weight">{{item.ckmj}}㎡{{item.ckitem.name}}</view>
						</view>
						<view class="chuzu_center flexleft">
							<image src="@/static/images/sy_slices/hongbi.png" mode="" class="tubiao"></image>
							<view class="yuan">{{item.cszj}}</view>
						</view>
						<view class="dingwie  flexbetween">
							<view class=" flexleft">
								<view class="location"></view>
								<view class="dizhi">{{item.cityinfo}}</view>
							</view>
							<view class="word_bluer">{{kmUnit(Number(item.distance))}}</view>
						</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	const qqmapsdk = new QQMapWX({
		key: 'HBRBZ-AHTE3-RFH3J-35KAR-VJBTV-ZBFZD' // 必填
	});
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				items: [],
				// 城市选择器开始
				pickerdzshow: false, //城市选择器
				startcitydata: { //始发地
					provence: "",
					provenceid: "",
					city: "",
					cityid: "",
					county: "",
					countyid: "",
				},
				endcitydata: { //目的地
					provence: "",
					provenceid: "",
					city: "",
					cityid: "",
					county: "",
					countyid: "",
				},
				currenttype: "", //0始发地，1结束地
				// 城市选择器结束
				title_top: 0, //顶部距离，px
				// 轮播图数据
				lbt: {
					top: [],
					center: []
				},
				// 仓库数据
				city_text: "", //当前城市信息
				currentAddress: "", //当前位置
				lat: "",
				lng: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				// 产品供需列表
				gxlist: [],
				dataAll: {},
				code: "", //根据获取地址里面的code来换取省市id
				isShowCount: false,
				is_login:false
			}
		},
		onLoad() {
			this.is_login = httpRequest.checkIsLogin();
			if (!this.is_login) {
				return false
			}
			this.getlocation()
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.title_top = menuButtonInfo.top
			this.getlbt()
			
			this.getmsg()
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "",
						"text": "不限",
						"pid": ""
					})
				})
				item.children.unshift({
					"value": "",
					"text": "不限",
					"pid": "",
				})
			})
			arr.unshift({
				"value": "14774747474",
				"text": "全国",
				"pid": "",
			})
			this.items = arr
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		onShow() {
			if (!this.is_login) {
				return false
			}
			this.getgx()
		},
		onShareAppMessage: function(options) {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		computed: {
			startaddress() {
				if (this.startcitydata.countyid) {
					return this.startcitydata.county
					return false
				}
				if (this.startcitydata.cityid && this.startcitydata.countyid == "") {
					return this.startcitydata.city
					return false
				}
				if (this.startcitydata.provenceid && this.startcitydata.cityid == "" && this.startcitydata
					.countyid ==
					"") {
					return this.startcitydata.provence
					return false
				}
				return "始发地"
			},
			emdaddress() {
				if (this.endcitydata.countyid) {
					return this.endcitydata.county
					return false
				}
				if (this.endcitydata.cityid && this.endcitydata.countyid == "") {
					return this.endcitydata.city
					return false
				}
				if (this.endcitydata.provenceid && this.endcitydata.cityid == "" && this.endcitydata
					.countyid == "") {
					return this.endcitydata.provence
					return false
				}
				return "目的地"
			}
		},
		methods: {
			getmsg() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data
						this.isShowCount = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 城市选择器开始
			changeaddress() {
				let startaddress = this.startcitydata
				this.startcitydata = this.endcitydata
				this.endcitydata = startaddress
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 1) {
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = "";
					this.startcitydata.cityid = "";
					this.startcitydata.county = "";
					this.startcitydata.countyid = "";
				}
				if (area.length == 2) {
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = area[1].text;
					this.startcitydata.cityid = area[1].value;
					this.startcitydata.county = "";
					this.startcitydata.countyid = "";
				}
				if (area.length == 3) {
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = area[1].text;
					this.startcitydata.cityid = area[1].value;
					this.startcitydata.county = area[2].text;
					this.startcitydata.countyid = area[2].value;
				}


			},
			bindPickerChange2(val) {
				let area = val.detail.value
				if (area.length == 1) {
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = "";
					this.endcitydata.cityid = "";
					this.endcitydata.county = "";
					this.endcitydata.countyid = "";
				}
				if (area.length == 2) {
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = area[1].text;
					this.endcitydata.cityid = area[1].value;
					this.endcitydata.county = "";
					this.endcitydata.countyid = "";
				}
				if (area.length == 3) {
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = area[1].text;
					this.endcitydata.cityid = area[1].value;
					this.endcitydata.county = area[2].text;
					this.endcitydata.countyid = area[2].value;
				}
			},
			// surecity(e) {
			// 	this.pickerdzshow = false
			// 	if (this.currenttype == 0) {
			// 		this.startcitydata = e
			// 	} else if (this.currenttype == 1) {
			// 		this.endcitydata = e
			// 	}
			// },
			// selectcity(value) {
			// 	this.currenttype = value
			// 	this.pickerdzshow = true
			// },
			// 城市选择器结束
			jumpsupply() {
				uni.switchTab({
					url: "/pages/supply/supply"
				})
			},
			jumpdetail(id) {
				uni.navigateTo({
					url: "/pages/supply/gongyingxq?id=" + id
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						// _this.init()
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								_this.code = res.result.ad_info.phone_area_code
								_this.getCurrCity()
								const mapdata = res.result.address_component;
								_this.city_text = mapdata.city; //省地址
								_this.currentAddress = res.result.address //详细地址
							},
							fail: function(error) {},
							complete: function(res) {}
						});
					}
				});
			},
			getCurrCity() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					code: this.code
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.startcitydata.provence = res.data.pinfo.name
						this.startcitydata.provenceid = res.data.pinfo.id
						this.startcitydata.city = res.data.name
						this.startcitydata.cityid = res.data.id
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			// 获取产品供需列表
			getgx() {
				httpRequest.request('/api/gx/gxList', 'GET', {
					page: 1,
					limit: 6,
					index_sort: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						this.gxlist = resList.data;
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 获取优选仓库列表
			// init(isPage, page) {
			// 	let _this = this;
			// 	httpRequest.request('/api/cc/ccList', 'GET', {
			// 		page: page || 1,
			// 		limit: _this.limit,
			// 		lat: this.lat,
			// 		lng: this.lng,
			// 		type: 1,
			// 		index_yx: 1
			// 	}, false, false, true).then(res => {
			// 		if (res.code == 1) {
			// 			let resList = res.data;
			// 			let dataList = _this.list;
			// 			if (isPage == true) {
			// 				_this.list.data = dataList.data.concat(resList.data);
			// 			} else {
			// 				this.list = res.data
			// 				_this.list.data = resList.data;
			// 			}
			// 		}

			// 	}).catch(err => {
			// 		httpRequest.toast(err.msg);
			// 	})
			// },
			// onReachBottom() {
			// 	let _this = this;
			// 	let list = _this.list;
			// 	let page = _this.page;
			// 	if (list.last_page <= page) {
			// 		return false;
			// 	}
			// 	page++;
			// 	_this.page = page;
			// 	_this.init(true, page);
			// },
			jumprul(item, index) {
				let i = []; //获取当前页面的轮播图数据
				i.push(item.image_text)
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			jumprul1(arr, index) {
				let i = []; //获取当前页面的轮播图数据
				arr.forEach(item => {
					i.push(item.image_text)
				})
				// i.push(item.image_text)
				// console.log(item)
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				// if (item.url == "") {
				// 	return false
				// }
				// uni.navigateTo({
				// 	url: item.url
				// })
			},
			// 获取轮播图
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 12,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let arr = res.data
						// res.data.forEach(item => {
						// 	arr.push(item.image_text)
						// })
						this.lbt.top = arr
					}
				})
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 13,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let arr = res.data
						// res.data.forEach(item => {
						// 	arr.push(item.image_text)
						// })
						this.lbt.center = arr
					}
				})
			},
			sear() {
				uni.navigateTo({
					url: '/pages/index/sousuo',
				})
			},
			zhaopin() {
				uni.navigateTo({
					url: '/pages/index/quanbuzhiwie'
				})
			},
			storage() { //仓储跳转
				httpRequest.toast("开发中，敬请期待");
				return false
				uni.navigateTo({
					url: '/pages/index/cangchu'
				})
			},
			message() { //行业咨询跳转
				uni.navigateTo({
					url: '/pages/index/hangyezixun',
				})
			},
			business() { //找企业跳转
				uni.navigateTo({
					url: '/pages/index/zhaoqiye'
				})
			},
			sign() {
				uni.navigateTo({
					url: '/pages/index/zhaobiaosslb',
				})
			},
			forum() { //论坛
				uni.navigateTo({
					url: '/pages/index/luntan'
				})
			},
			zhuanxian() { //专线跳转
				let data = {
					startcitydata: this.startcitydata,
					endcitydata: this.endcitydata,
				}
				uni.navigateTo({
					url: '/pages/index/zhuanxianchaxun?msg=' + encodeURIComponent(JSON.stringify(data))
				})
				// uni.navigateTo({

				// 	url: '/pages/index/zhuanxian?msg=' + encodeURIComponent(JSON.stringify(data))
				// })
			},
			cangchuxq(id) {
				// httpRequest.toast("开发中，敬请期待");
				// return false
				uni.navigateTo({
					url: '/pages/index/cangchugyxq?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cangchuimage {
		width: 400rpx;
		height: 450rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huitext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}

	.oo {
		margin: 0rpx 37rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.10);
	}

	.content {
		background-color: #fafafa;
	}

	.header {
		padding: 0 25rpx;
	}

	.header_tuo {
		position: fixed;
		left: 0;
		z-index: 300;
		width: 100%;
		box-sizing: border-box;
		top: 0;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding: 0 30rpx 30rpx;
		background-color: #fff;
	}

	.center {
		margin: 30rpx 0rpx;

		.center_left {
			.biao {
				width: 22rpx;
				height: 29rpx;
			}

			.zheng {
				font-size: 28rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
				padding-left: 14rpx;
			}
		}

		.center_right {
			font-size: 24rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;

			.heng {
				width: 1rpx;
				height: 14rpx;
				border-left: 1rpx solid #333;
				margin: 0rpx 31rpx;
			}
		}
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 60rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 500rpx;
		padding: 0rpx 0rpx 0rpx 30rpx;
	}

	input:input-placeholder {
		font-size: 24rpx;
	}

	.sy_img {
		height: 312rpx;
		margin-top: 30rpx;
		border: 28rpx 28rpx 28rpx 28rpx;
	}

	.nav {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 41rpx;
		padding-bottom: 30rpx;
	}

	.cha_img {
		width: 15rpx;
		height: 25rpx;
		padding-left: 9rpx;
	}

	.nav_cha {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.nav_zhuan {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.nav_a {
		padding: 30rpx 0rpx;
	}

	.jiantou {
		width: 57rpx;
		height: 20rpx;
	}

	.liji {
		margin: 0rpx 30rpx;
		padding: 15rpx 0rpx 15rpx 0rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background-color: #258ffe;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 30rpx;
		text-align: center;
	}

	.zhaobiao_img {
		width: 90rpx;
		height: 90rpx;
	}

	.zhaobiao_imgs {
		width: 43rpx;
		height: 43rpx;
		background-size: 100% 100%;
		align-items: center;
	}

	.zhaobiao_yuan {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		top: 1056rpx;
		left: 483rpx;
	}

	.zhaobiao {
		padding: 0rpx 17rpx;
	}

	.zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.zi_luntan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;
		top: 28rpx;
	}

	.gongxu_img {
		width: 29rpx;
		height: 29rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}


	.gongxu_b {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.gongxu_a {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0rpx 30rpx;
	}

	.gongxu {
		margin-top: 60rpx;
	}

	.right {
		flex-grow: 1;
		align-self: flex-start;
		padding-left: 29rpx;
	}

	.section_img {
		width: 144rpx;
		height: 144rpx;
		background-size: 100% 100%;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.section {
		padding: 35rpx 29rpx 29rpx 29rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.right_ershou {
		font-size: 30rpx;
		font-weight: 800;
		color: #000000;
	}

	.right_xuqui {
		position: relative;
		left: 28rpx;
		bottom: 35rpx;
		padding: 3rpx 26rpx 1rpx 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: rgba(243, 101, 32, 1);
		border-bottom-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}

	.right_gongying {
		position: relative;
		left: 28rpx;
		bottom: 35rpx;
		padding: 3rpx 26rpx 1rpx 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #228DFF;
		border-bottom-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}

	.num {
		padding-top: 17rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.ge {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 0, 0, 1);
	}

	.price {
		padding-top: 17rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.qian {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 0, 0, 1);
	}

	.section_center {
		padding-right: 75rpx;
	}

	.gongying {
		margin: 10rpx 10rpx 0 0;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(34, 141, 255, 1);
		padding: 3rpx 29rpx 4rpx 29rpx;
		background-color: RGBA(233, 244, 255, 1);
		margin-top: 14rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhuanye_img {
		width: 336rpx;
		height: 191rpx;
		border: 28rpx 28rpx 28rpx 28rpx;
		margin-top: 27rpx;
	}

	.youxuan_img {
		width: 29rpx;
		height: 29rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.youxuan_b {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.youxuan_a {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0rpx 30rpx;
	}

	.youxuan {
		margin-top: 30rpx;
	}

	// 
	.chuzu_img {
		width: 132rpx;
		height: 132rpx;
		background-size: 100% 100%;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.chuzu {
		padding: 30rpx 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

	}

	.tubiao {
		width: 16rpx;
		height: 23rpx;
		margin-right: 14rpx;
	}

	.dizhi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}



	.chuzu_a {
		padding-left: 19rpx;
		flex-grow: 1;
		align-self: flex-start;
	}

	.chuzu_center {
		padding-top: 14rpx;
	}

	.dingwie {
		padding-top: 10rpx;
	}

	.yuan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF3A3A;
	}
</style>